<template>
	<div class="wx_tc" @click="stopPropagation">
		<div class="wx_bar " v-if="showBar">
			<ul>
				<li v-for="i in baseSet" :key="i.id" @click="showClassBtn(i.id,i.tag)"
					:class="{'wx_active':isBarid==i.id}">
					<Icon :class="i.font" size="16" color="#aaa">
						<p class="wx_ft14 wx_mt6">{{i.name}}</p>
					</Icon>
				</li>
			</ul>
		</div>

		<div class="wx_tvlist" v-if="showClass">
			<ul>
				<li v-for="item in classifys" :key="item.id" @click="getChannels(item.id)">{{item.name}}</li>
			</ul>
		</div>
		<div class="wx_channellist" v-if="showChannel">
			<ul class="wx_ul">
				<li class="wx_list" v-for="channel in channels" :key="channel.id" @click="changSrc(channel.id)">
					{{channel.name}}
				</li>
			</ul>
		</div>
		<div class="wx_changebtn">
			<!-- <div class="wx_youjiantou" @click="showTC">
				换台
				<i class="iconfont tv-xiangyoushuangjiantou"></i>
			</div> -->

		</div>
	</div>
</template>

<script lang="ts" setup>
	import {reactive, ref} from "vue";
	
	// interface User {
	// 	id : number
	// 	name : string,
	// 	classicon : string
	// }
	
	// let tableData : User[] = ref([])
	
	const showBar = ref<boolean>(true);
	const showClass =  ref<boolean>(true);
	const showChannel  =  ref<boolean>(true);
	const isBarid = ref<number>(0);
	const baseSet = reactive([
		{ id: 0, name: "直播", font: "tv-zhibo", tag: "zhibo" },
		{ id: 1, name: "我的", font: "tv-wode", tag: "wode" },
		{ id: 2, name: "设置", font: "tv-shezhi", tag: "shezhi" },
		{ id: 3, name: "客服", font: "tv-kefu", tag: "kefu" },
	])
	const classifys = ref([])
	const channels = ref([])
	
	
	
	
	
	// 函数
	const stopPropagation = () => {
		
	}
	
	const showClassBtn = () => {
		
	}
	
	
</script>

<style>
	
</style>